<template>
    <div class="container">
        <div class="money-detail">
            <header>
                <router-link to="/">首页 / </router-link>
                <router-link to="/partner/money">资方管理 / </router-link>
                {{id&&info.coreData?info.coreData.companyName:'添加'}}
            </header>
            <div class="detail-display">
                <ul v-if="id" class="flex-box-align tab-list">
                    <li class="flex" :class="{active: activeIndex == 1}" @click="handleClickTab(1)"><a>基础信息</a></li>
                    <li  class="flex" :class="{active: activeIndex == 2}" @click="handleClickTab(2)"><a>支行管理</a></li>
                </ul>
                <div class="info">
                    <div class="primary-detail" v-if="activeIndex == 1 && !isEditDetail">
                        <div class="info-edit">
                            <el-form :model="information" :rules="rules1" ref="information" >
                                <div class="edit-title">基础信息 <div @click="()=>{this.editState = false}"  v-if="editState" class="edit-btn">编辑</div></div>
                                <el-form-item prop="companyName">
                                    <div class="edit-list ">
                                        <div class="name">企业名称：</div>
                                        <div v-if="!editState" class="edit-value input">
                                            <el-input v-model="information.companyName" placeholder="请输入内容"></el-input>
                                        </div>
                                        <div class="name-value" v-if="editState">{{information.companyName?information.companyName:''}}</div>
                                    </div>
                                </el-form-item>
                                <el-form-item prop="capitalType">
                                    <div class="edit-list">
                                        <div class="name">资方主体类型：</div>
                                        <div v-if="!editState" class="edit-value">
                                            <el-select  filterable v-model="information.capitalType" clearable placeholder="请选择">
                                                <el-option
                                                v-for="item in bodyArr"
                                                :key="item.key"
                                                :label="item.value"
                                                :value="item.key">
                                                </el-option>
                                            </el-select>
                                        </div>
                                        <div v-if="editState" class="name-value" >{{info.bankBaseData?returnType(info.bankBaseData.capitalType):''}}</div>
                                    </div> 
                                </el-form-item>
                                <el-form-item prop="regdate">
                                    <div class="edit-list">
                                        <div class="name">注册成立日期：</div>
                                        <div v-if="!editState" class="edit-value input">
                                        <el-date-picker
                                            v-model="information.regdate"
                                            type="date"
                                            placeholder="选择日期"
                                            format="yyyy 年 MM 月 dd 日"
                                            value-format="yyyy-MM-dd">
                                            </el-date-picker>
                                        </div>
                                        <div class="name-value" v-if="editState">{{information.regdate?information.regdate.split(' ')[0]:''}}</div>
                                    </div>
                                </el-form-item>
                                <el-form-item prop="provinceCode">
                                    <div class="edit-list address ">
                                        <div class="name">资方主体地址：</div>
                                        <div v-if="!editState" class="edit-value">
                                            <el-select  filterable v-model="information.provinceCode"  @change="provinceChange" clearable placeholder="请选择">
                                                <el-option
                                                v-for="item in addressArr"
                                                :key="item.key"
                                                :label="item.value"
                                                :value="item.key">
                                                </el-option>
                                            </el-select>
                                            <el-select  filterable v-model="information.cityCode" @change="cityChange" clearable placeholder="请选择">
                                            <el-option
                                                v-for="item in cityArr"
                                                :key="item.key"
                                                :label="item.value"
                                                :value="item.key">
                                                </el-option>
                                            </el-select>
                                            <el-select  filterable v-model="information.districtCode" clearable placeholder="请选择">
                                                <el-option
                                                v-for="item in districtArr"
                                                :key="item.key"
                                                :label="item.value"
                                                :value="item.key">
                                                </el-option>
                                            </el-select>
                                            <el-input class="address-detail" v-model="information.address"></el-input>
                                        </div>
                                        <div v-if="editState" class="name-value" >{{info.bankBaseData&&info.bankBaseData.provinceName?info.bankBaseData.provinceName:''}}{{info.bankBaseData&&info.bankBaseData.cityName?'-'+info.bankBaseData.cityName:''}}{{info.bankBaseData&&info.bankBaseData.districtName?'-'+info.bankBaseData.districtName:''}}{{info.bankBaseData&&info.bankBaseData.address?'-'+info.bankBaseData.address:''}}</div>
                                    </div>
                                </el-form-item>
                                <el-form-item prop="memo">
                                    <div class="edit-list">
                                        <div class="name">资方介绍：</div>
                                        <div v-if="!editState" class="edit-value input">
                                        <el-input
                                                type="textarea"
                                                :rows="5"
                                                placeholder="请输入内容"
                                                v-model="information.memo">
                                                </el-input>
                                        </div>
                                        <div class="name-value" v-if="editState">{{info.bankBaseData&&info.bankBaseData.memo?info.bankBaseData.memo:''}}</div>
                                    </div>
                                </el-form-item>
                                <el-form-item prop="licenceId">
                                   <div class="edit-list image">
                                        <div class="name">营业执照复印件：</div>
                                        <div v-if="!editState" class="edit-value">
                                            <div class="add-image">
                                                <el-upload  list-type="picture-card" class="normal-uploader" 
                                                    :class="{uploadShow:uploadShow}"
                                                    :action="upLoadUrl"    
                                                    :on-success="handleFileSuccess"   
                                                    :file-list='fileShowList'
                                                    :limit='10'
                                                    :on-remove="handleRemove">   
                                                    <i class="el-icon-plus"></i> 
                                                </el-upload>  
                                            </div>
                                        </div>
                                        <div  v-if="editState" class="edit-img">
                                            <img :src="info.licenceData&&info.licenceData.licenceFileInfo?info.licenceData.licenceFileInfo.fileUrl:''" alt="">
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item prop="unifiedCreditNumber">
                                   <div class="edit-list">
                                        <div class="name">社会统一信用号：</div>
                                        <div v-if="!editState" class="edit-value input">
                                            <el-input v-model="information.unifiedCreditNumber" placeholder="请输入内容"></el-input>
                                        </div>
                                        <div class="name-value" v-if="editState">{{information.unifiedCreditNumber}}</div>
                                    </div>    
                                </el-form-item>
                            </el-form>
                             <div  v-if="!editState" @click="submitBtn('information')" class="btn-submit">提交</div>   
                        </div>
                    </div>
                    <div class="primary-detail" v-else-if="activeIndex == 1 && isEditDetail">
                        <el-button type="primary" style="background-color: #ED7018;border-color: #ED7018;float: right" @click="handleClickCommitDetail">提交</el-button>
                        <div class="whiteSpace mb30">
                            企业名称：<el-input v-model="coreData.companyName" placeholder="请输入内容" style="width: 300px"></el-input>
                        </div>
                        <div class="whiteSpace mb30">
                            成立时间：<el-date-picker
                                    v-model="coreData.regdate"
                                    type="date"
                                    style="width: 300px"
                                    placeholder="选择日期"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd">
                                    </el-date-picker>
                        </div>
                        <div class="whiteSpace mb30">
                            注册资本：<el-input v-model="coreData.regMoney" placeholder="请输入内容" style="width: 300px"></el-input>
                        </div>
                        <div class="flex-box-align whiteSpace mb30">
                            <span>注册地址：</span>
                            <v-distpicker :province="province" :city="city" :area="district"
                                          @province="selectProvince"
                                          @city="selectCity"
                                          @area="selectArea"
                            ></v-distpicker>
                            <el-input v-model="licenceData.regAddress" placeholder="请输入内容" style="width: 200px"></el-input>
                        </div>
                        <!--<div class="flex-box-align whiteSpace mb30">-->
                            <!--<span>经营地址：</span>-->
                            <!--<v-distpicker :province="runProvince" :city="runCity" :area="runDistrict"-->
                                          <!--@province="selectRunProvince"-->
                                          <!--@city="selectRunCity"-->
                                          <!--@area="selectRunArea"-->
                            <!--&gt;</v-distpicker>-->
                            <!--<el-input v-model="licenceData.runRegAddress" placeholder="请输入内容" style="width: 200px"></el-input>-->
                        <!--</div>-->
                        <!--<div class="whiteSpace mb30">-->
                            <!--企业联系人：<el-input v-model="input" placeholder="请输入内容" style="width: 300px"></el-input>-->
                        <!--</div>-->
                        <!--<div class="whiteSpace mb30">-->
                            <!--联系方式：<el-input v-model="input" placeholder="请输入内容" style="width: 300px"></el-input>-->
                        <!--</div>-->
                        <!--<div class="whiteSpace mb30">-->
                            <!--主营业务描述：<el-input v-model="input" placeholder="请输入内容" style="width: 300px"></el-input>-->
                        <!--</div>-->
                    </div>
                    <div class="branch-detail" v-else-if="activeIndex == 2">
                        <el-button type="primary"
                                   style="background-color: #ED7018;border-color: #ED7018;"
                                   @click="handleClickAddBranch">添加</el-button>
                        <div class="" style="margin-top: 30px;">
                            <table-list ref="tableList" :tableConfig='configList'>
                                <el-table-column  slot="status"  align="center"  label="状态">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.status == 'on'?'上架':'下架'}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column class="btn" label="操作" slot="btn" align="center" >
                                    <template slot-scope="scope">
                                        <el-button  type="primary" size="small" @click="handleClickEdit(scope.row)">编辑</el-button>
                                        <el-button  type="primary" size="small" @click="handleClickOn(scope.row.id)" style="background: #ED7018;border-color: #ED7018" v-if="scope.row.status == 'off'">上架</el-button>
                                        <el-button  type="primary" size="small" @click="handleClickOff(scope.row.id)" style="background: #ED7018;border-color: #ED7018" v-else-if="scope.row.status == 'on'">下架</el-button>
                                    </template>
                                </el-table-column>
                            </table-list>
                        </div>
                    </div>
                </div>
            </div>

            <el-dialog
                    custom-class="branchDialog"
                    title="添加支行"
                    :visible.sync="dialogVisible"
                    width="30%" 
                    :before-close="handleClose">
                    <el-form :model="subParams" :rules="rules" ref="subParams">
                        <el-form-item  prop="subBankName">
                            <div class="whiteSpace mb30">
                                <span>支行名称：</span><el-input v-model="subParams.subBankName" placeholder="请输入内容" style="width: 200px"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item  prop="contactName"  >
                            <div class="whiteSpace mb30">
                                <span>联系人：</span><el-input v-model="subParams.contactName" placeholder="请输入内容" style="width: 200px"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item  prop="contactPhone">
                             <div class="whiteSpace mb30">
                                <span>联系方式：</span><el-input v-model="subParams.contactPhone" placeholder="请输入内容" style="width: 200px"></el-input>
                            </div>
                        </el-form-item>
                    </el-form>       
                <div style="text-align: center">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleClickSaveSubBank('subParams')" style="background: #ED7018;border-color: #ED7018">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {parseUrlParams} from "../../util";
    let CONSTANT = require('../../constant/constant.js'),
        common = require('../../common.js');
    export default {
        data() {
            var validateCode =  (rule, value, callback) => {
                if (!common.checkSocialCreditCode(value)) return callback(new Error('社会统一信用号输入不合法'))
                return callback();
            };
            var validateNum =  (rule, value, callback) => { 
                console.log(isNaN(value),value)
                if (isNaN(value)){ return callback(new Error('请输入数字')); }
                var reg= /^(-?\d+)(\.\d{1,2})?$/
                if (!reg.test(value)){ return callback(new Error('请保留两位小数')); }
                callback();
            };
            return {
                id:'',
                detail: {},
                activeIndex: 1,
                isEditDetail: false,
                dialogVisible: false,
                info:'',
                fileShowList:[],
                uploadUrl:'',
                addressArr:[],
                cityArr:[],
                districtArr:[],
                uploadShow:false,
                editState:true,
                rules: {
                    contactName:[
                        {required: true, message: '请输入联系人', trigger: 'change'  }
                    ],
                    contactPhone:[
                        {required: true, message: '请输入联系方式', trigger: 'change'  }
                    ],
                    subBankName:[
                        {required: true, message: '请输入支行名称', trigger: 'change'  }
                    ],
                },
                rules1:{
                    companyName: [
                        { required: true, message: '请选择所属行业', trigger: 'blur' }
                    ],
                    capitalType: [
                        { required: true, message: '请选择资方主体类型', trigger: 'blur' }
                    ],
                    regdate: [
                        { required: true, message: '请输入注册成立日期', trigger: 'blur' }
                    ],
                    memo: [
                        { required: true, message: '请输入资方介绍', trigger: 'blur' }
                    ],
                     provinceCode: [
                        { required: true, message: '请选择资方主体地址', trigger: 'blur' }
                    ],
                    licenceId: [
                        { required: true, message: '请上传营业执照复印件', trigger: 'blur' }
                    ],
                    unifiedCreditNumber: [
                        { required: true, message: '请输入社会统一信用号', trigger: 'blur' },
                        {  validator: validateCode, trigger: 'blur' }
                    ],
                },
                configList:{
                    url:CONSTANT.URL.BANK.BANKUSERSUBBANK,
                    configList:[
                        {
                            label:'支行名称',
                            prop: "bankName"
                        },
                        {
                            label: '联系人',
                            prop: "contactName"
                        },
                        {
                            label:'联系信息',
                            prop: "contactPhone"
                        },
                        {
                            label:'当前状态',
                            prop: "statusDesc"
                        },
                        {
                            slot: "btn",
                        }
                    ],
                    param:{
                    },
                    query: {
                        userId: ""
                    },
                    type:'',
                    width:'',
                    isPagination:true
                },
                information:{
                    companyName:'',
                    fundBody:'',
                    address:'',
                    regdate:'',
                    provinceCode:'',
                    cityCode:'',
                    districtCode:"",
                    memo:'',
                    unifiedCreditNumber :'',
                    licenceId:'',
                    masterName:'',
                    regMoney:'',
                    contactName:'',
                    contactPhone:''
                },
                baseData: {
                    parentChannelCode: "",
                    userId: ""
                },
                coreData: {
                    companyName: "",
                    regdate: "",
                    regMoney: "",
                },
                licenceData: {
                    regProvinceCode: "",
                    regCityCode: "",
                    regDistrictCode: "",
                    regAddress: "",
                    runProvinceCode: "",
                    runRegCityCode: "",
                    runRegDistrictCode: "",
                    runRegAddress: "",
                    contactDatas: [
                        {
                            age: "",
                            trueName: "",
                            position: "",
                            introduction: "",
                        }
                    ]
                },
                subParams: {
                    contactName: "",
                    contactPhone: "",
                    subBankName: "",
                    // userId: ""
                    id: ""
                },
                province: "",
                city: "",
                district: "",
                runProvince: "",
                runCity: "",
                runDistrict: "",
                btnState:true
            }
        },
        components: {
            'table-list':() => import('../common/my-table')
        },
        created(){
            this.id = parseUrlParams("id")
            if(!parseUrlParams("id")){
                this.editState = false
            }
            this.getDictionary("fund_body", (data) => {
                this.bodyArr = data.data.bussData
            })
        },
        mounted(){
            if(!parseUrlParams("id")){
                this.editState = false
            }
             let sessionId = common.getCookie('sessionId');
            this.upLoadUrl = CONSTANT.URL.SYS.ADMINUPLOAD+ '?sessionId='+sessionId;
            if(this.id){
                this.getDetail()
            }else{
                this.getProvince()
            }
       },
        methods:{
            provinceChange(e){
                this.information.regCityCode = ''
                this.cityArr = [];
                this.districtArr = []
                this.information.regDistrictCode = ''
                this.addressArr.map((item)=>{
                    if(e== item.key){
                        this.cityArr = item.childs
                    }
                })
            },
            cityChange(e){
                this.districtArr = []
                this.information.regDistrictCode = ''
                this.cityArr.map((item)=>{
                    if(e == item.key){
                        this.districtArr = item.childs
                    }
                })
            },
            handleRemove(file, fileList) {      // 图片上传
                let deleteUrl = file.url;
                this.uploadShow = false;
                this.information.licenceId = '';
            },       
            handleFileSuccess(res, file) {
                if(res.status == 200){
                    let picItem = res.data.bussData;
                    this.information.licenceId = picItem.fileId;
                    this.uploadShow = true;
                }
            },
            returnType(id){
                let str;
                if(this.bodyArr&&id){
                    this.bodyArr.map((item)=>{
                        if(item.key == id){
                            str = item.value
                        }
                    })
                }
                
                return str;
            },
            edit(obj){
                this.subParams = {
                    contactName: obj.contactName,
                    contactPhone:  obj.contactPhone,
                    subBankName:  obj.subBankName,
                    id:  obj.id
                },
                this.dialogVisible = true;
            },
            getList() {
                this.$refs.tableList.getList()
            },
            getDictionary(params, callback) {
                let url = CONSTANT.URL.SYS.LOADDICTIONARY;
                common.requestAjax(url, {codeType: params}, {}, callback);
            },
            getDetail() {
                let url = CONSTANT.URL.COMPANY.COMPANYBASEDETAIL;
                common.requestAjax(url, {}, {userId: parseUrlParams("id")}, (res) => {
                    if (res.status == 200) {
                        this.info= res.data.bussData;
                        let data = res.data.bussData;
                        
                        this.information = {
                            companyName:data.coreData.companyName,
                            regdate:data.coreData.regdate,
                            provinceCode:data.bankBaseData?data.bankBaseData.provinceCode:'' ,
                            cityCode:data.bankBaseData?data.bankBaseData.cityCode:'',
                            districtCode:data.bankBaseData?data.bankBaseData.districtCode:'',
                            licenceId:data.licenceData?data.licenceData.licenceFileId:'',
                            unifiedCreditNumber:data.licenceData?data.licenceData.unifiedCreditNumber:'',
                            memo:data.bankBaseData?data.bankBaseData.memo:'',
                            address:data.bankBaseData?data.bankBaseData.address:'',
                            capitalType:data.bankBaseData?data.bankBaseData.capitalType:'',
                        }
                        console.log(this.information.companyName,'aaaa')
                        if(data.licenceData&&data.licenceData.licenceFileInfo){
                            this.fileShowList.push({
                                url:data.licenceData.licenceFileInfo.fileUrl
                            })
                        }
                        this.getProvince()
                        
                    }

                })
            },
                                    
            getProvince(){
                this.getDictionary("province", (data) => {
                    this.addressArr= data.data.bussData
                    if(!this.information.provinceCode)return
                    this.addressArr.map((item)=>{
                        if(this.information.provinceCode == item.key){
                            this.cityArr = item.childs
                            if(!this.information.cityCode)return
                            item.childs.map((list)=>{
                                if(this.information.cityCode == list.key){
                                    this.districtArr = list.childs
                                }
                            })
                        }
                    })
                })
            },
            handleSelect(key, keyPath) {
            },
            handleClickTab(index) {
                this.activeIndex = index
                if (index == 2) {
                    this.configList.query.userId = parseUrlParams("id")
                }
            },
            handleClickEditDetail() {
                this.isEditDetail = true
            },
            submitBtn(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let  url =CONSTANT.URL.COMPANY.SAVEBASEDETAIL,
                        data = {
                            "coreData": {
                            "companyName":this.information.companyName ,
                            "userType": 'bank',
                            "regdate": this.information.regdate,
                        },
                        "licenceData": {
                            "unifiedCreditNumber":  this.information.unifiedCreditNumber,
                            'licenceFileId':this.information.licenceId
                        },
                        'bankBaseData':{
                            'address':this.information.address,
                            'capitalType':this.information.capitalType,
                            "cityCode": this.information.cityCode,
                            "districtCode": this.information.districtCode,
                            "provinceCode": this.information.provinceCode,
                            "memo":this.information.memo
                        },
                        "userId":parseUrlParams("id")?parseUrlParams("id"):''
                        
                        }
                        common.requestAjax(url, JSON.stringify(data), {}, (data) => {
                            if (data.status == 200) {
                                this.$message({
                                    message: data.msg,
                                    type: 'success'
                                })
                                if(this.id){
                                    this.editState = true
                                    this.getDetail()
                                }else{
                                    this.$router.push("/partner/money");
                                }
                            

                            }
                        })
                    }
                })
                
            },
            handleClickCommitDetail() {
                let url = CONSTANT.URL.COMPANY.SAVEBASEDETAIL;
                let params = {
                    coreData: this.coreData,
                    licenceData: {
                        regProvinceCode: this.licenceData.regProvinceCode,
                        regCityCode: this.licenceData.regCityCode,
                        regDistrictCode: this.licenceData.regDistrictCode
                    },
                    userId:parseUrlParams("id")
                }
                common.requestAjax(url, JSON.stringify(params), {}, (data) => {
                    if (data.status == 200) {
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        })
                        this.isEditDetail = false
                        this.getDetail()

                    }
                })
            },
            handleClickAddBranch() {
                this.subParams = {
                    contactName: '',
                    contactPhone:'',
                    subBankName:  '',
                    userId: ''
                }
                this.dialogVisible = true
            },
            handleClose() {
                this.dialogVisible = false
            },
            handleClickSaveSubBank(formName) {
                if(!this.btnState) return;
                this.btnState = false;
                this.$refs[formName].validate((valid) => {
                    if (valid) { 
                        let url = CONSTANT.URL.BANK.SAVEBANKUSER;
                        common.requestAjax(url, JSON.stringify(Object.assign(this.subParams, {userId: parseUrlParams("id")})), {}, (data) => {
                            if (data.status == 200) {
                                this.$message({
                                    message: data.msg,
                                    type: 'success'
                                })
                                this.dialogVisible = false
                                this.getList()
                                this.btnState = true;
                            }
                        })
                    } else {
                        this.btnState = true;
                        return false;
                    }
                });
            },
            handleClickEdit(scope) {
                this.dialogVisible = true
                this.subParams = {
                    id:scope.id,
                    contactName: scope.contactName,
                    contactPhone :scope.contactPhone,
                    subBankName: scope.subBankName,
                    id: scope.id
                }
            },
            selectProvince(val) {
                this.licenceData.regProvinceCode = val.code
            },
            selectCity(val) {
                this.licenceData.regCityCode = val.code
            },
            selectArea(val) {
                this.licenceData.regDistrictCode = val.code
            },
            selectRunProvince(val) {
                this.licenceData.runProvinceCode = val.code
            },
            selectRunCity(val) {
                this.licenceData.runRegCityCode = val.code
            },
            selectRunArea(val) {
                this.licenceData.runRegDistrictCode = val.code
            },
            handleClickOn(id) {
                let url = CONSTANT.URL.BANK.ONOROFFSUBBANK;
                common.requestAjax(url, JSON.stringify({id: id, status: "on"}), {}, (data) => {
                    if (data.status == 200) {
                        this.$message({
                            message: data.msg,
                            type:"success"
                        })
                        this.getList()
                    }
                })

            },
            handleClickOff(id) {
                let url = CONSTANT.URL.BANK.ONOROFFSUBBANK;
                common.requestAjax(url, JSON.stringify({id: id, status: "off"}), {}, (data) => {
                    if (data.status == 200) {
                        this.$message({
                            message: data.msg,
                            type:"success"
                        })
                        this.getList()
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .container {
        .mb30 {
            margin-bottom: 30px;
        }
        .whiteSpace {
            white-space: nowrap;
        }
        .btn-submit{
            margin: 50px 0 0 30%;
            width: 140px;
            height: 40px;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            background-color: #ED7018;
            font-size: 16px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            &:hover{
                background-color: #ED9000;
                transition:all .2s linear
            }
        }
        .info-edit{
            padding-top: 31px;
             .el-form-item{
                margin-bottom: 0PX;
            }
            .el-form-item__error {
                top: 71%;
                left: 14%;
            }
            .edit-title{
                position: relative;
                font-size: 16px;
                color: #333;
                font-weight: bold;
                padding-left: 16px;
                margin-bottom: 28px;
                    .edit-btn{
                        display: inline-block;
                        float: right;
                        width: 80px;
                        height: 30px;
                        margin-right: 20px;
                        background-color: #ED7018;
                        border-radius: 4px;
                        -webkit-border-radius: 4px;
                        font-size: 14px;
                        color: #fff;
                        text-align: center;
                        line-height: 30px;
                        cursor: pointer;
                        &:hover{
                            background-color: #ED9000;
                            transition:all .2s linear
                        } 
                    }
                &:after{
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 2px;
                    width: 3px;
                    height: 17px;
                    background-color: #ED7018;
                }
            }
            .edit-list{
                overflow: hidden;
                margin-bottom: 24px;
                .name{
                    float: left;
                    width: 12%;
                    text-align: right;
                    font-size: 14px;
                    color: #666;
                    margin-right: 15px;
                    height: 40px;
                    line-height: 40px;
                }

                .name-value{
                    float: left;
                    width: 80%;
                    text-align: left;
                    font-size: 14px;
                    color: #666;
                    margin-right: 15px;
                    height: 40px;
                    line-height: 40px;
                }

                .regMoney-input{
                    width: 350px;
                    margin-right: 20px;
                }
                
                .address-detail{
                    display: block;
                    width: 384px;
                    margin-top: 20px;
                }

                    .edit-img{
                        
                        img{
                            width: 306px;
                            height: 227px;
                            border: 0;
                        }
                    }

                &.line{
                    .el-select{
                    margin-right: 10px;
                    width: 185px;
                    margin-right: 10px;
                    }
                }
                &.image{
                    .edit-value{
                        float: none;
                        .add-image{
                            margin-left: 170px;
                            margin-top: 50px;
                        }
                    } 
                }
                &.address{
                    .el-select{
                    margin-right: 16px;
                    width: 115px;
                    }
                }
                &.chanel{
                    .el-select{
                    width: 384px;
                    } 
                }
                &.register{
                    .el-select{
                    margin-right: 10px;
                    width: 87px;
                    }
                    .address-input{
                        width: 422px;
                    }
                }
    
                &.introduce{
                    margin-bottom: 0;
                    .title-item{
                        overflow: hidden;
                        font-size: 14px;
                        color: #666;
                        height: 40px;
                        line-height: 40px;
                        .title-list{
                            float: left;
                            width: 87px;
                            margin-right: 10px;
                        }
                    }
                    .el-input{
                        margin-right: 10px;
                        width: 87px;
                    }
                    .address-input{
                        display: inline-block;
                    }
                    .address-input{
                        width: 422px;
                    
                    }
                }
                .edit-value{
                    position: relative;
                    float: left;
                    font-size: 14px;
                    color: #333;
                    .el-textarea{
                        margin-top: 10px;
                    }
                    .el-icon-plus{
                        width: 306px;
                        height: 227px;
                        background: url('../../images/upload-default.png');
                        background-size: 100%;
                        &:before{
                            content: ''
                        }
                    }
                    .btn-add{
                            position: absolute;
                            right: -80px;
                            width: 73px;
                            height: 40px;
                            bottom: 25px;
                            // margin-left: 41px;
                            // margin-top: 30px;
                            background-color: #ED7018;
                            border-radius: 4px;
                            -webkit-border-radius: 4px;
                            font-size: 14px;
                            color: #fff;
                            text-align: center;
                            line-height: 40px;
                            cursor: pointer;
                            &:hover{
                                background-color: #ED9000;
                                transition:all .2s linear
                            } 
                        }
                    .el-upload--picture-card{
                        width: 306px;
                        height: 227px;
                        border: 0;
                    }
                    .el-upload-list__item{
                        width: 306px;
                        height: 227px;
                    }
                    
                    &.text{
                        height: 40px;
                        line-height: 40px;
                    }
                    &.input{
                        width: 384px;
                            .el-date-editor{
                                width: 384px;
                                input{
                                    padding-left: 30px;
                                }
                            }
                    }
                    .add-image{
                        width: 306px;
                        height: 227px;
                    }
                }
            }
        }
        .money-detail {

            header {
                margin: 19px 0;
                font-size: 14px;
                color: #333;
                a {
                    color: #999;
                }
            }
            .el-form-item {
                margin-bottom: 0;
            }
            .el-dialog__body{
                .el-form-item__error {
                    top: 68%;
                    left: 16%;
                }
            }
        
            .detail-display {
                padding: 23px;
                background-color: #fff;
                .tab-list {
                    width: 200px;
                    padding-bottom: 30px;
                    border-bottom: 1px solid #e1e1e1;
                    li{
                        cursor: pointer;
                    }
                    .active {
                        color: #ED7018;
                    }
                }
                .info {
                    padding-top: 30px;
                   
                }
            }
        }
    }
</style>
